<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas test</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .main {
            width: calc(100% - 100px);
            height: calc(100% - 100px);
            padding: 40px;
        }

        #canvas {
            /*background-color: #1a9cff;*/
            border: 1px solid #3cb3ff;
        }
    </style>
</head>
<body>
<div class="main">
    <canvas id="canvas" width="400" height="400"></canvas>
</div>
<script type="text/javascript">

    function clockCanvas (clear = false) {
        let canvasDom = document.getElementById('canvas')
        let context
        if (canvasDom.getContext('2d')) {
            context = canvasDom.getContext('2d')
            if (clear) {
                context.clearRect(0, 0, 400, 400)
            }

            // 创建 一个圆
            context.beginPath()
            context.strokeStyle = '#3cb3ff'
            context.lineWidth = 8
            context.arc(200, 200, 180, 0, 360, false)
            context.stroke()
            context.closePath()

            context.save() // 旋转和设置的偏移需要先保存，画完进行回滚。
            context.translate(200, 200) // 移动中心点到画布中心
            // 画 时 刻度 加时文字。通过每次旋转 30度 每次画 四个 刻度，分 三次 画完12个刻度
            for (let i = 0; i < 3; i++) {
                drawLines(context, i)
            }
            // 画 分 刻度
            for (let i = 0; i < 15; i++) {
                if (i / 5 === 0) {
                    context.rotate(6 * Math.PI / 180)
                } else {
                    drawLines(context, 0, 6, 'shortLine', 2)
                }
            }
            context.closePath()
            context.restore() // 画完刻度后，回滚旋转和移动的中心点。

            // h、m、s 分别代表 时、分、秒 的指针。
            drawPointer(context, 'h', getAngle('h'))
            drawPointer(context, 'm', getAngle('m'))
            drawPointer(context, 's', getAngle('s'))
            drawNode(context)
            context.closePath()
        }
    }

    function drawLines (context, index, angle = 30, type = 'line', lineWidth = 4) {
        let data = {
            line: [
                {x: 0, y: -180, eX: 0, eY: -162, zX: 0, zY: -152},
                {x: 180, y: 0, eX: 162, eY: 0, zX: 152, zY: 0},
                {x: 0, y: 180, eX: 0, eY: 162, zX: 0, zY: 152},
                {x: -180, y: 0, eX: -162, eY: 0, zX: -152, zY: 0}
            ],
            shortLine: [
                {x: -180, y: 0, eX: -167, eY: 0},
                {x: 180, y: 0, eX: 167, eY: 0},
                {x: 0, y: -180, eX: 0, eY: -167},
                {x: 0, y: 180, eX: 0, eY: 167}
            ]
        }
        let line = data[type]
        for (let i = 0; i < 4; i++) {
            if (type === 'line') {
                // 画时的文本
                context.font = '15px 黑体 '
                context.fillStyle = 'black'
                context.textAlign = 'center'
                context.textBaseline = 'middle'
                let text = index + i * 3 ? index + i * 3 : 12
                context.fillText(text, line[i].zX, line[i].zY, 20)
            }
            context.strokeStyle = '#3cb3ff'
            context.lineWidth = lineWidth
            context.moveTo(line[i].x, line[i].y)
            context.lineTo(line[i].eX, line[i].eY)
        }
        context.stroke()
        context.rotate(angle * Math.PI / 180)
    }

    function drawPointer (context, type = 'h', angle) {
        context.save()
        context.beginPath()
        context.translate(200, 200)
        let data = {
            h: ['#000', -100, 4, 10],
            m: ['#18b5ff', -120, 3, 14],
            s: ['red', -160, 2, 20]
        }
        context.strokeStyle = data[type][0]
        context.lineWidth = data[type][2]
        // 通过 angle 角度进行旋转
        context.rotate(angle * Math.PI / 180)
        context.moveTo(data[type][3], 0)
        context.lineTo(data[type][1], 0)
        context.stroke()
        context.closePath()
        context.restore()
    }

    function drawNode (context) {
        context.beginPath()
        context.strokeStyle = 'red'
        context.lineWidth = 4
        context.arc(200, 200, 4, 0, 360, false)
        context.stroke()
        context.closePath()
        context.beginPath()
        context.fillStyle = '#fff'
        context.arc(200, 200, 4, 0, 360, false)
        context.fill()
        context.closePath()
    }

    function getAngle (type) {
        // 返回计算出来的角度，后面 加 90度 是因为 0度 时指向是 3时，我们画的图 选择的 0度 是 12时所以差 90 度。
        let date = new Date()
        if (type === 'h') {
            let h = date.getHours() > 11 ? date.getHours() - 12 : date.getHours()
            return h * 360 / 12 + 90
        }
        if (type === 'm') {
            let m = date.getMinutes()
            return m * 360 / 60 + 90
        }
        if (type === 's') {
            let s = date.getSeconds()
            return s * 360 / 60 + 90
        }
    }

    function animate() {
        clockCanvas(true)
        // requestAnimationFrame 改方法专门用于动画
        window.requestAnimationFrame(animate)
    }
    window.requestAnimationFrame(animate)
</script>
</body>
</html>
